<!DOCTYPE html>
<html>
<head>
    <title>AI调解助手_2</title>
    <style>
        #chat-box {
            width: 90%;
            height: 600px;
            border: 1px solid #ccc;
            overflow-y: scroll;
            margin-bottom: 10px;
            padding: 10px;
        }

        #user-input {
            width: 80%;
            padding: 5px;
        }

        #send-button {
            padding: 5px 10px;
        }

        .user-message {
            color: blue;
            white-space: pre-wrap; 
        }

        .server-message {
            color: green;
            white-space: pre-wrap; 
        }
    </style>
</head>

<body>
    <h1>AI调解助手_2</h1>
    <div id="chat-box"></div>
    <input type="text" id="user-input" placeholder="请输入您的消息..." />
    <button id="send-button" onclick="sendMessage()">发送</button>

    <script>
        const chatBox = document.getElementById("chat-box");
        const input = document.getElementById("user-input");

        function sendMessage() {
            const message = input.value.trim();
            if (message === "") return;

            appendMessage("你", message, "user-message");
            input.value = "";

            fetch("http://101.201.118.111:11014/chat", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({ message: message })
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error("服务器错误");
                }
                return response.json();
            })
            .then(data => {
                appendMessage("AI助手", data.reply, "server-message");
            })
            .catch(error => {
                appendMessage("系统", "请求失败：" + error.message, "server-message");
            });
        }

        function appendMessage(sender, message, className) {
            const messageElement = document.createElement("div");
            messageElement.className = className;
            messageElement.textContent = sender + ": " + message;
            chatBox.appendChild(messageElement);
            chatBox.scrollTop = chatBox.scrollHeight;
        }

        // 按回车发送消息
        input.addEventListener("keydown", function(event) {
            if (event.key === "Enter") {
                sendMessage();
            }
        });
    </script>
</body>
</html>
